import { WebGLRenderer } from 'three';
import gsap from 'gsap';
import chinaMap from '../../map/china.json';
import { createMap, createMapBorder, setCenter } from '../createMap.js';
import { getDynamicMapScale } from '../utils/getDynamicMapScale.js';
function createRenderer(mapRef, scene, mapData) {
	// console.log('createMap', mapData);
	const renderer = new WebGLRenderer({ alpha: true, antialias: true });
	renderer.setSize(window.innerWidth, window.innerHeight);
	// 这里修改为下面写法，否则 onresize 不生效
	if (mapRef.childNodes[0]) {
		mapRef.removeChild(mapRef.childNodes[0]);
	}

	mapRef.appendChild(renderer.domElement);
	const map = createMap(mapData);
	scene.add(map);

	/**
	 * 动态地图缩放大小
	 */
	const mapScale = getDynamicMapScale(map, mapRef);
	console.log('mapScale：', map.scale);
	console.log('mapScale：', mapScale);
	let { x, y, z } = map.scale;
	/**
	 * 动画
	 */
	gsap.fromTo(map.scale, { x: x * mapScale, y: y * mapScale, z: z * mapScale,   }, { x, y, z ,duration: 1});
	// gsap.to(map.scale, { x: mapScale*0.5, y: 1, z: 1, duration: 1 });
	return renderer;
}

export { createRenderer };
